<template>
    <div class="form-index-container">
      <div class="fd-nav">
        <div class="fd-nav-left">
          <div class="fd-nav-back" @click="backFormProject"><i class="anticon anticon-left"></i></div>
          <div class="fd-nav-title" @click="backFormProject">问卷模板设计器</div>
        </div>
        <div class="fd-nav-center">
          <div class="fd-nav-container">
            <div class="ghost-bar" :style="{ 'transform': activeTranslateX}"></div>
            <div  :class="activeRoute===menuItem.route ? 'fd-nav-item active' : 'fd-nav-item'" @click="handleMenuActiveClick(menuItem.route,index)"  v-for="(menuItem, index) in menuItemList" :key="menuItem.route" :index="menuItem.route"><span class="order-num">{{index+1}}</span>{{menuItem.title}}</div>
          </div>
        </div>
        <div class="fd-nav-right">
          <button type="button" class="ant-btn button-preview" @click="previewDialogVisible=true"><span>设计预览</span></button>
        </div>
      </div>
      <div style="height: 60px"></div>

      <div class="form-main-container">
        <div class="right-content-containerNew">
          <router-view />
        </div>
      </div>

      <el-dialog :visible.sync="previewDialogVisible" destroy-on-close fullscreen>
        <pre-view :key="previewKey" :preview-qrcode="true" />
      </el-dialog>

    </div>
</template>

<script>
  import PreView from '@/views/duojuhe/form/preview'
  export default {
    name: 'templateIndex',
    components: {PreView},
    data() {
        return {
            previewDialogVisible: false,
            defaultActiveMenu: 'editorTemplate',
            previewKey: +new Date().getTime(),
            projectId: null,
            activeRoute:'/project/form/template/editorTemplate',
            activeTranslateX:"translateX(0px)",
            menuItemList: [
            {
              title: '模板设计',
              icon: 'el-icon-edit',
              route: '/project/form/template/editorTemplate'
            },
            {
              title: '显示逻辑',
              icon: 'el-icon-menu',
              route: '/project/form/template/logicTemplate'
            },
           {
              title: '模板外观',
              icon: 'el-icon-view',
              route: '/project/form/template/themeTemplate'
            }
          ]
        }
    },
    created() {
        this.previewKey = +new Date().getTime()
        this.projectId = this.$route.query.key
        this.activeRoute = this.$route.path
        this.initMenuActiveClick()
    },
  methods: {

    initMenuActiveClick() {
      if (this.activeRoute){
        for (let i=0; i<this.menuItemList.length; i++){
          let item = this.menuItemList[i]
          if (this.activeRoute===item.route){
            this.activeTranslateX = "translateX("+i*150+"px)"
            break;
          }
        }
      }
    },

    handleMenuActiveClick(route,index) {
      if (route){
        this.activeRoute = route;
        this.activeTranslateX = "translateX("+index*150+"px)"
        this.$router.replace({path: route, query: {key: this.projectId}}).catch(err => err)
      }
    },

      menuSelectHandle(index) {
        this.$router.replace({path: index, query: {key: this.projectId}}).catch(err => err)
      },
        backFormProject(){
          this.$router.replace({path:'/formAdmin/formTemplateAdmin'})
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/workflow/workflow.css";
.form-index-container {
  height: 100%;
  width: 100%;
}


::v-deep .el-card__body {
  padding: 0;
}

::v-deep .el-menu {
  border: none;
  background-color: transparent;
}

.header-container {
  width: 100%;
  overflow-x: auto;
/*  height: 50px;
  padding: 0 20px;*/

  .el-icon-back {
    font-size: 22px;
    font-weight: 550;
    cursor: pointer;
    color: #000;
    margin-right: 25px;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }

  .header-logo {
    height: 30px;
    width: 200px;
  }
}

.form-main-container {
  width: 100%;
 // height: calc(100vh - 60px);
  display: flex;
  flex-direction: row;

  .right-content-container {
    width: calc(100vw - 100px);
    height: calc(100vh - 60px);
    overflow-x: hidden;
  }

  .right-content-containerNew {
    width: calc(100vw);
    height: calc(100vh - 60px);
    overflow-x: hidden;
  }
}

.left-menu-container {
  max-width: 100px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: solid 1px #e6e6e6;

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 100px;
    min-height: 400px;
  }

  .el-icon-d-arrow-left,
  .el-icon-d-arrow-right {
    font-size: 19px;
    cursor: pointer;
    font-weight: 550;
    color: #000;
    margin-bottom: 100px;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

::v-deep.preview-container {
  background-color: #ffffff;
}
</style>
